import { useState, useEffect, useMemo } from "react";
import { SubTitle } from '../components/SubTitle';
import { Form, Skeleton } from 'antd-mobile';
import { SmileOutline, MessageOutline } from 'antd-mobile-icons';
import { useSelector } from 'react-redux';
import { TypingEffect } from '../components/TypingEffect';
import { SubjectSelectionRecommendations } from "../components/SubjectSelectionRecommendations";

export function A() {
    const analysis = useSelector(state => state.questions.present.analysis);
    const data = useMemo(() => analysis?.data, [analysis?.data]);
    const [loading, setLoading] = useState(false);
    const [answerRendered, setAnswerRendered] = useState(false);
    useEffect(() => {
        let timeout;
        function init() {
            if (analysis?.status === 'pending') {
                setLoading(true);
            }
            if (analysis?.status === 'success') {
                timeout = setTimeout(() => setLoading(false), 1000);
            }
        }
        init();
        return () => clearTimeout(timeout);
    }, [analysis?.status]);

    return (
        analysis && analysis?.status !== undefined && (loading ?
            <>
                <Skeleton.Title animated />
                <Skeleton.Paragraph lineCount={7} animated />
            </>
            :
            <>
                <SubTitle
                    icon={<SmileOutline />}
                    title="现在 "
                    stitle="我来做个回复。"
                    detail="尝试回答您最先的问题。"
                    speed={10}>
                </SubTitle>
                <Form style={{ marginTop: '8px' }}>
                    <Form.Item label={<><MessageOutline color='#000' />&nbsp;<TypingEffect text={"我的回答"} speed={50}></TypingEffect></>}>
                        <TypingEffect onComplete={() => setAnswerRendered(true)} style={{ textIndent: "2em", display: "block", color: "#19556e" }} text={data?.answer} speed={20} />
                    </Form.Item>
                    {
                        answerRendered &&
                        <SubjectSelectionRecommendations
                            advise={data?.advise}
                            explain={data?.explain}
                        >
                        </SubjectSelectionRecommendations>
                    }
                </Form>
            </>
        )
    )
}